<script>
  /* global chai */
  var assert = chai.assert;
  var configureList = [];
  var readyList = [];

  function clearTestLists() { //eslint-disable-line
    configureList = [];
    readyList = [];
  }

  var readyBehavior = {
    moniker: function() {
      return this.is + (this.id ? '#' + this.id : '');
    },
    // use private, stateful, method for testing purposes
    _configure: function() {
      assert.isTrue(!this.isAttached, 'Element should not be attached when configured.');
      configureList.push(this.moniker());
    },
    ready: function() {
      readyList.push(this.moniker());
    },

    attached: function() {
      assert.isTrue(this._readied, 'Element not ready when attached');
    }
  };
</script>

<dom-module id="x-zot">
  <template>
    x-zot<content></content>
  </template>
  <script>
    Polymer({
      is: 'x-zot',
      behaviors: [readyBehavior]
    });
  </script>
</dom-module>

<dom-module id="x-bar">
  <template>
    <x-zot></x-zot>
  </template>
  <script>
    Polymer({
      is: 'x-bar',
      behaviors: [readyBehavior]
    });
  </script>
</dom-module>

<dom-module id="x-foo">
  <template>
    <x-bar id="bar1"></x-bar>
    <x-bar id="bar2"></x-bar>
  </template>
  <script>
    Polymer({
      is: 'x-foo',
      behaviors: [readyBehavior]
    });
  </script>
</dom-module>

<dom-module id="x-ready">
  <template>
    <x-zot id="a">
      <x-zot id="b"></x-zot>
      <x-zot id="c">
        <x-zot id="d"></x-zot>
      </x-zot>
    </x-zot>
    <x-foo id="foo"></x-foo>
  </template>
  <script>
    Polymer({
      is: 'x-ready',
      behaviors: [readyBehavior]
    });
  </script>
</dom-module>
